<template>
  <view>
    <!-- #ifndef WEB -->
    <view :class="props.className" class="nav-bar-bg">
      <uni-nav-bar
        id="navbar-id"
        :background-color="props.bgColor || '#ffffff00'"
        :border="props.border"
        :color="props.color"
        :height="44"
        :left-width="props.leftShow ? '20%' : '0'"
        :right-width="props.leftShow ? '20%' : '0'"
        :shadow="props.shadow"
        :title="props.title"
        fixed
        left-icon="back"
        status-bar
        @clickLeft="clickLeft"
      >
        <slot name="title">
          <view :style="{ color: props.color }" class="nav-bar-title">{{ props.title }}</view>
        </slot>
        <view class="nav-bar-bottom">
          <slot name="bottom"></slot>
        </view>
      </uni-nav-bar>
    </view>
    <!-- #endif -->
    <!-- #ifdef WEB -->
    <view :class="props.className" class="nav-bar-bg">
      <view class="nav-bar-bottom">
        <slot name="bottom"></slot>
      </view>
    </view>
    <!-- #endif -->

    <my-dialog ref="dialogRef" :is-mask-click="false"></my-dialog>
  </view>
</template>

<script setup>
import { defineExpose, defineProps, ref } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: 'title'
  },
  border: {
    type: Boolean,
    default: false
  },
  bgColor: {
    type: String,
    default: ''
  },
  className: {
    type: String,
    default: 'default'
  },
  leftShow: {
    type: Boolean,
    default: true
  },
  shadow: {
    type: Boolean,
    default: false
  },
  color: {
    type: String,
    default: '#000000'
  }
});
const dialogRef = ref();

const showDialog = (title, content) => {
  dialogRef.value.open({
    title,
    content,
    cancelShow: false,
    success: () => {
      uni.navigateBack();
    }
  });
};

const closeDialog = () => {
  dialogRef.value.close();
};

const setTitle = (text, content) => {
  dialogRef.value.setTitle(text, content);
};

const showSubmit = text => {
  dialogRef.value.showSubmit(text);
};

const showCancel = text => {
  dialogRef.value.showCancel(text);
};

defineExpose({
  showDialog,
  closeDialog,
  setTitle,
  showSubmit,
  showCancel
});

// 左侧返回图标
const clickLeft = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.nav-bar-bg {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  background: url('@/assets/images/bg.png') no-repeat;
  background-size: cover;
  //overflow: hidden;

  .nav-bar-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 34rpx;
    color: #000;
  }

  .nav-bar-bottom {
    position: absolute;
    /* #ifdef WEB */
    top: 0;
    /* #endif */
    /* #ifndef WEB */
    top: calc($uni-padding-top + 44px);
    /* #endif */
    left: 0;
    width: 100%;
  }
}

.default {
  /* #ifdef WEB */
  height: 0;
  /* #endif */
  /* #ifndef WEB */
  height: calc($uni-padding-top + 44px);
  /* #endif */
}

// 采购单列表筛选
.purchase-filter {
  /* #ifndef WEB */
  height: calc($uni-padding-top + 44px + 220rpx);
  /* #endif */
  /* #ifdef WEB */
  height: 220rpx;
  /* #endif */
}

// 流程列表筛选
.process-filter {
  /* #ifndef WEB */
  height: calc($uni-padding-top + 44px + 220rpx);
  /* #endif */
  /* #ifdef WEB */
  height: 220rpx;
  /* #endif */
}
</style>
